<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div>
        <div th:insert="common/mainHeader :: main_header"></div>
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li>
                        <a th:href="@{/main}">
                            账号信息
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/teamUI}">
                            团队信息
                        </a>
                    </li>
                    <li class="active">
                        <a th:href="@{/uis/updatePwdUI}">
                            修改密码
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>修改密码</p>
                    </div>
                    <div class="right_table">
                        <form class="form-horizontal" id="myForm" method="post">
                            <div class="table_form">
                                <label for="password">原密码</label>
                                <input id="password" name="password" type="password" placeholder="请输入原密码">
                            </div>
                            <div class="table_form">
                                <label for="newPwd">新密码</label>
                                <input type="password" id="newPwd" name="newPwd" placeholder="请输入新密码">
                            </div>
                            <div class="table_form">
                                <label for="newPwdCopy">新密码确认</label>
                                <input type="password" id="newPwdCopy" name="newPwdCopy" placeholder="请再次输入密码">
                            </div>
                            <div class="table_form">
                                <label>&nbsp;</label>
                                <input  type="submit" class="btn btn-primary formBtn" value="提交" >
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== RULE PART ENDS ======-->

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>

    <script src="/js/jquery-validate.js"></script>
    <script src="/js/sweetalert.min.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    password: {
                        required: true
                    },
                    newPwd: {
                        required: true,
                        rangelength: [6, 16]
                    },
                    newPwdCopy: {
                        equalTo: '#newPwd'
                    }
                },
                messages: {
                    password: {
                        required: "请输入原始密码"
                    },
                    newPwd: {
                        required: "请输入新密码",
                        rangelength: "密码需要6到16位之间"
                    },
                    newPwdCopy: {
                        equalTo: "两次密码不一致！"
                    }
                },
                submitHandler: function(form) {
                    const formData = {
                        password: $('#password').val(),
                        newPwd: $('#newPwd').val(),
                        newPwdCopy: $('#newPwdCopy').val()
                    };
                    $.ajax({
                        type: 'POST',
                        url: '/updatePwd',
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                            if(data.message!=null){
                                swal({
                                    text: data.message,
                                    icon: 'error'
                                });
                            }else{
                                swal({
                                    text: '密码修改成功！',
                                    icon: 'success',
                                })
                                setTimeout(function (){
                                    window.location.reload();
                                },1500)
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error: ' + textStatus);
                        }
                    });
                    // form.submit(); // 如果验证通过，则提交表单
                }
            });
        })
    </script>
</body>
</html>
